<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;

        }

        span {
            position: absolute;
            transition: all 6s;

        }

        div {}

        .qww {
            position: relative;


        }

        .ttt {
            width: 4rem;
            height: 1.5rem;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>
    <div class="qww"></div>
    <div class="ttt">1</div>
    <div class="ttt">2</div>
    <div class="ttt">3</div>
    <div class="ttt">4</div>
    <div class="ttt">5</div>
</body>
<script>
    function $(name) {
        return document.querySelector(name);
    }
    function _(name) {
        return document.querySelectorAll(name);
    }
    let shu = 5;//发射数量
    let tts = _(".ttt")
    console.log(tts)
    wodf();
    function wodf() {
        tts.forEach(function (v, i) {
            v.onclick = function () {
                shu = i + 1;
            }
        })
    }
    //屏幕宽高
    let w, h;
    let text = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']
    //第坐标数组

    let zuobiao = [];
    let span;

    function shuijishu() {
        let w = window.innerWidth / 2;
        let h = window.innerHeight / 2;
        zuobiao = [];
        for (let i = 0; i < shu; i++) {
            //第一象限
            let yi1 = {};
            yi1.x1 = Math.floor(Math.random() * w>30?Math.random() *w +(w-30):Math.random() *w);
            yi1.y1 = Math.floor(Math.random() * h>30?Math.random() * h - 30:Math.random() * h);
            //第二象限
            yi1.x2 = Math.floor(Math.random() * w>30?Math.random() * w- 30:Math.random() * w);
            yi1.y2 = Math.floor(Math.random() * h>30?Math.random() * h - 30:Math.random() * h);
            //第三象限
            yi1.x3 = Math.floor(Math.random() * w>30?Math.random() * w - 30:Math.random() * w);
            yi1.y3 = Math.floor(Math.random() * h>30?Math.random() * h + (h - 30):Math.random() * h);
            //第四象限
            yi1.x4 = Math.floor(Math.random() * w>30?Math.random() * w + (w - 30):Math.random() * w);
            yi1.y4 = Math.floor(Math.random() * h>30?Math.random() * h + (h - 30):Math.random() * h);
            // console.log(yi1)
            zuobiao.push(yi1);


        }
        console.log(zuobiao)
        let dd = 0
        for (let i = 0; i < zuobiao.length * 4; i++) {

            if (dd >= 11) {
                dd = 0;
            } else {
                dd += 1;
            }
            $(".qww").innerHTML += `<span class="bbb" style="left:${w}px;top:${h}px">${text[dd]}</span>`;


        }
        ssdc();
        bian()
    }
    function ssdc() {
        //疑问 为什么在定时器里过度生效
        span = _("span");
        setTimeout(function () {

            for (let i = 0; i < shu; i++) {
                span[i].style = `left:${zuobiao[i].x1}px;top:${zuobiao[i].y1}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
                span[i + shu].style = `left:${zuobiao[i].x2}px;top:${zuobiao[i].y2}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
                span[i + shu * 2].style = `left:${zuobiao[i].x3}px;top:${zuobiao[i].y3}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
                span[i + shu * 3].style = `left:${zuobiao[i].x4}px;top:${zuobiao[i].y4}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
            }

        }, 300)
        setTimeout(function () {
            $(".qww").innerHTML = "";
        }, 6000)
    }

    function bian() {
        setTimeout(function () {
            let w = window.innerWidth / 2;
            let h = window.innerHeight / 2;
            zuobiao = [];
            for (let i = 0; i < shu; i++) {
                //第一象限
                let yi1 = {};
                yi1.x1 = Math.floor(Math.random() * w + (w - 30));
                yi1.y1 = Math.floor(Math.random() * h - 30);
                //第二象限
                yi1.x2 = Math.floor(Math.random() * w - 30);
                yi1.y2 = Math.floor(Math.random() * h - 30);
                //第三象限
                yi1.x3 = Math.floor(Math.random() * w - 30);
                yi1.y3 = Math.floor(Math.random() * h + (h - 30));
                //第四象限
                yi1.x4 = Math.floor(Math.random() * w + (w - 30));
                yi1.y4 = Math.floor(Math.random() * h + (h - 30));
                // console.log(yi1)
                zuobiao.push(yi1);
            }
            span = _("span");
            for (let i = 0; i < shu; i++) {
                span[i].style = `left:${zuobiao[i].x1}px;top:${zuobiao[i].y1}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
                span[i + shu].style = `left:${zuobiao[i].x2}px;top:${zuobiao[i].y2}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
                span[i + shu * 2].style = `left:${zuobiao[i].x3}px;top:${zuobiao[i].y3}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
                span[i + shu * 3].style = `left:${zuobiao[i].x4}px;top:${zuobiao[i].y4}px;color: hsl(${Math.random() * 360}, 100%, 50%)`
            }

        }, 3000)
    }
    shuijishu()
    setInterval("shuijishu()", 6200);
</script>

</html>
<!-- <span class="bbb" style="left:${zuobiao[i].x1}px;top:${zuobiao[i].y1}px">qqqq</span><span style="left:${zuobiao[i].x2}px;top:${zuobiao[i].y2}px">qqqq</span>
            <span style="left:${zuobiao[i].x3}px;top:${zuobiao[i].y3}px">qqqq</span><span style="left:${zuobiao[i].x4}px;top:${zuobiao[i].y4}px">qqqq</span>` -->